<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="订单编号: ">
          <el-input v-model="form.value" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="运营员" :value="false" />
            <el-option label="维修员" :value="true" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容部分 -->
    <div class="content">
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="140" />
        <el-table-column prop="userName" label="人员名称" width="240" />
        <el-table-column prop="roleName" label="角色" width="240" />
        <el-table-column prop="mobile" label="联系电话" width="240" />
        <el-table-column prop="workCount" label="完成工单(本月)" width="240" />
        <el-table-column prop="progressTotal" label="进行中工单" width="240" />
        <el-table-column prop="cancelCount" label="拒绝工单(本月)" width="240" />
        <el-table-column width="140" label="操作">
          <template #default="{ row }">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 10px"
              @click="details(row)"
            >查看详情</el-link>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部 -->
    <div v-if="dataAll.totalCount>10">
      <el-row>
        <el-col
          :span="18"
        >共{{ dataAll.totalCount }}条记录 第 {{ dataAll.pageIndex }}/{{ dataAll.totalPage }} 页
          <div
            class="grid-content bg-purple"
          /></el-col>
        <el-col :span="6">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              :disabled="upShow"
              @click="up"
            >上一页</el-button>
            <el-button
              type="primary"
              :disabled="underShow"
              @click="under"
            >下一页<i

              class="el-icon-arrow-right el-icon--right"
            /></el-button>
          </el-button-group>
          <div
            class="grid-content bg-purple-light"
          /></el-col>
      </el-row>
    </div>
    <el-dialog
      title="人员详情"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <!-- 头部 -->
      <div class="title">
        <el-row>
          <el-col :span="8" style="margin-right:30px">
            <span>人员名称:{{ humanDetails.userName }}</span>
          </el-col>
          <el-col :span="8">
            <span>角色:{{ humanDetails.roleName }}</span>
          </el-col>
          <el-col :span="8">
            <span>联系电话:{{ humanDetails.mobile }}</span>
          </el-col>
          <span>负责区域:{{ humanDetails.regionName }}</span>
        </el-row>
      </div>
      <!-- 内容 -->
      <el-table
        :data="xiangXi"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          width="180"
        />
        <el-table-column
          prop="total"
          label="总工单数"
          width="180"
        />
        <el-table-column
          prop="cancelCount"
          label="拒绝工单"
        />
        <el-table-column
          prop="workCount"
          label="完成工单"
        />
        <el-table-column
          prop="progressTotal"
          label="进行中工单"
        />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'
import { detailsWork, userApi, workloadList } from '@/api'
export default {
  data() {
    return {
      xiangXi: [],
      humanDetails: {}, // 人员详情
      addr: '',
      pay: {
        1: '支付宝', 2: '微信'
      },
      dialogVisible: false, // 控制查看详情
      condition: {
        0: '创建', 1: '支付完成', 2: '出货成功', 3: '出货失败'
      },
      upShow: false, // 上下按钮禁用状态
      underShow: false, // 上下按钮禁用状态
      row: {},
      addVisible: false, // 控制添加的弹出层
      form: {
        value: '',
        region: ''
      },
      tableData: [], // 表格绑定
      dataAll: {}, // 全部数据
      rules: {
        addValue: { required: true, message: '请输入', trigger: 'blur' }
      }
    }
  },
  created() {
    this.publicFn()
  },
  methods: {
    roww(row) {
      console.log(row)
    },
    handleClose() {
      // 查看详情的关闭方法
      this.dialogVisible = false
      this.xiangXi = []
    },
    async details(row) {
      // 查看详情
      this.dialogVisible = true
      // console.log(row)
      const { data } = await userApi(row.userId)
      this.humanDetails = data
      const timer = new Date()
      // console.log(timer.getFullYear())// 年
      const year = timer.getFullYear()
      // console.log(timer.getMonth() + 1)// 月
      const moon = timer.getMonth() + 1
      // console.log(timer.getDate())// 日
      const sun = timer.getDate() - timer.getDay()
      // console.log(timer.getDay())// 周
      // console.log(moment(timer).format('YYYY-MM-DD' + ' HH:mm:ss'))
      const time = moment(timer).format('YYYY-MM-DD' + ' HH:mm:ss')
      // // 年
      this.timer(row.userId, `${year}-${moon}-${sun} 00:00:00`, time, '本周')
      this.timer(row.userId, `${year}-${moon}-01 00:00:00`, time, '本月')
      this.timer(row.userId, `${year}-01-01 00:00:00`, time, '本年')
    },
    async timer(userId, start, end, title) {
      const { data } = await detailsWork({ userId: userId, start: start, end: end })
      this.xiangXi.push({ title: title, workCount: data.workCount,
        progressTotal: data.progressTotal,
        cancelCount: data.cancelCount, total: data.total })
      // console.log(res)
    },

    onSubmit() {
      // 查询按钮
      console.log(this.form)
      this.publicFn(1, 10, this.form.value, this.form.region)
    },
    // 公共
    async publicFn(pageIndex, pageSize, userName, isRepair, roleId) {
      const { data } = await workloadList({
        pageIndex: pageIndex,
        pageSize: pageSize,
        userName: userName,
        roleId: roleId,
        isRepair: isRepair
      })
      console.log(data)
      this.dataAll = data
      this.tableData = data.currentPageRecords
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
    },
    up() {
      // 上一页
      this.publicFn(+this.dataAll.pageIndex - 1, this.dataAll.pageSize)
    },
    under() {
      // 下一页
      this.publicFn(+this.dataAll.pageIndex + 1, this.dataAll.pageSize, '', '')
    }
  }
}
</script>
  <style lang="scss" scoped>
.bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.content {
  margin-top: 20px;
  background-color: #fff;
  padding: 5px;
}
.bottom {
  margin-top: 30px;
}
.btn {
  text-align: center;
}
.gd {
  margin-top: 10px;
}
.title {
  padding: 20px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 80px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  .pic {
    margin-left: 220px;
  }
}
</style>

